<template>
  <div id="checkWriteRecord">
    <!-- 顶部 -->
    <div class="header">
      <component :is="header"></component>
    </div>
    <!-- 顶部end -->
    <!-- 中间内容-->
    <div class="content">
      <div class="left-aside">
        <!--导出数据  -->
        <div class="educe">
          <el-button type="primary">
            <a :href="downFileUrlData" @click="importWriteRecord">导出数据</a>
            <i class="el-icon-download el-icon--right"></i>
          </el-button>

          <el-button type="primary">
            <a :href="downFileUrlDisfill" @click="importWriteRecord">导出未填写</a>
            <i class="el-icon-download el-icon--right"></i>
          </el-button>
          <el-button type="primary" @click="sendEmails">
            发送邮件
            <i class="el-icon-s-promotion el-icon--right"></i>
          </el-button>
        </div>
        <!--导出数据end -->
        <!-- 填写记录列表 -->
        <table class="iTableData">
          <tr>
            <th v-for="(iHead, hIndex) in tableOptionsData" v-text="iHead.title" :key="hIndex"></th>
          </tr>
          <tr v-for="(item,index) in myTableData" :key="index">
            <td
              v-for="(sItem, sIndex) in item.optionFillResults"
              v-text="sItem.content"
              :key="sIndex"
            ></td>
          </tr>
        </table>
        <!-- 分页 -->
        <div class="diviPage">
          <el-pagination
            layout="prev, pager, next"
            @current-change="skipPage"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
          ></el-pagination>
        </div>
        <!-- 分页end -->
        <!-- 填写记录列表列表end -->
      </div>
    </div>
    <!-- 中间内容end -->
    <!-- 底部 -->
    <div class="footer">
      <component :is="footer"></component>
    </div>
    <!-- 底部end -->
  </div>
</template>
<script>
import TeacherHeader from "../../components/TeacherHeader.vue";
import Footer from "../../components/Footer.vue";

export default {
  name: "checkWriteRecord",
  data() {
    return {
      // 定义组件
      header: "TeacherHeader",
      footer: "Footer",
      // 分页
      rows: 100,
      total: 0,
      currentPage: 1,
      pageSize: 2,
      // 表头数据
      tableOptionsData: [],
      tableData: [{}],
      // 导出数据
      downFileUrlData: "",
      // 导出未填写
      downFileUrlDisfill: "",
      // 发送邮件
      downFileUrlSendEmail: "",
      collectionId: "",
      tableData1: [],
      myTableData: []
    };
  },
  created() {
    // 获取跳转时带过来的id
    this.collectionId = this.$route.query.collectionId;
    this.$get(
      // 获得所有的 option的信息 渲染表头信息
      this.$urlPath.collection + "/collection/info/" + this.collectionId
    )
      .then(resp => {
        if (resp.code == 200) {
          this.tableOptionsData = resp.data.options;
        }
      })
      .catch(error => {
        console.log(error);
      });
    // 渲染表体数据
    this.$get(
      this.$urlPath.record +
        "/record/all/" +
        this.collectionId +
        "/" +
        this.currentPage +
        "/" +
        this.pageSize
    )
      .then(resp => {
        if (resp.code == 200) {
          // this.tableData = resp.data.list;
          //  this.pages = resp.data.data.list.pages
          // console.log(resp);
          this.total = resp.data.total;
          this.pageSize = resp.data.pageSize;
          this.myTableData = resp.data.list;
          for (let i = 0; i < resp.data.list.length; i++) {
            //   // console.log(resp.data.list[i]);
            //   for (
            //     let j = 0;
            //     j < resp.data.list[i].optionFillResults.length;
            //     j++
            //   ) {
            this.tableData = resp.data.list[i].optionFillResults;
            //     // console.log(this.tableData[j].content);
            //     this.tableData1 = this.tableData[j + 1].content;
            //     // console.log(this.tableData[j].content);
            // console.log(this.tableData);
            //   }
          }
        }
        console.log(resp);
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    // 根据页码跳转
    skipPage: function(currentPage) {
      this.currentPage = currentPage;
      this.$get(
        this.$urlPath.record +
          "/record/all/" +
          this.collectionId +
          "/" +
          this.currentPage +
          "/" +
          (this.pageSize - 1)
      )
        .then(resp => {
          if (resp.code == 200) {
            // this.tableData = resp.data.list;
            //  this.pages = resp.data.data.list.pages
            // console.log(resp);
            this.total = resp.data.total;
            this.pageSize = resp.data.pageSize;
            this.myTableData = resp.data.list;
          }
          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },

    importWriteRecord() {
      // 导出数据
      this.downFileUrlData =
        "http://172.18.84.23:8888/record-service/record/export/" +
        this.collectionId;
      // 导出未填写
      this.downFileUrlDisfill =
        "http://172.18.84.23:8888/record-service/record/notFillStudent/export/" +
        this.collectionId;
      // 发送邮件
      // this.downFileUrlSendEmail =
      //   "http://172.18.84.23:8888/record-service/record/notFillStudent/sendEmail/1";
    },
    sendEmails() {
      // 发送邮件
      this.$get(
        this.$urlPath.record +
          "record/notFillStudent/sendEmail/" +
          this.collectionId
      )
        .then(resp => {
          if (resp.code == 200) {
            return this.$message.success("邮件发送成功！");
          }
          if (resp.code == 400) {
            return this.$message.error(resp.message);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  components: {
    TeacherHeader,
    Footer
  }
};
</script>
<style lang="less">
@import "../../assets/less/checkWriteRecord.less";
</style>